<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Gallery</title>
<link href="../../css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../includes/xpath.js"></script>
<script type="text/javascript" src="../../includes/SpryData.js"></script>
<script type="text/javascript" src="../../includes/SpryEffects.js"></script>
<script type="text/javascript" src="../../includes/SpryDOMUtils.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("galleries/galleries.xml", "galleries/gallery");
var dsGallery = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery");
var dsPhotos = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery/photos/photo");

// IsCurrentGalleryRow() gets invoked by the following markup:
//
//      <option spry:when="function::IsCurrentGalleryRow" selected="selected">
//
// It is a replacement for the following JS expression:
//
//     <option spry:when="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">
//
// which was used in the original gallery, but cannot be used in the AIR application
// sandbox because eval() is disabled.

function IsCurrentGalleryRow(rgn, lookupFunc)
{
	return lookupFunc("{ds_RowNumber}") == lookupFunc("{ds_CurrentRowNumber}");
}

// This is an observer on the "galleries" region. Any time the region is re-generated,
// we need to re-add the onchange event listener so we can load the gallery the user selected.

Spry.Data.Region.addObserver("galleries", { onPostUpdate: function()
{
	Spry.$$("#gallerySelect").addEventListener("change", function(){ dsGalleries.setCurrentRowNumber(this.selectedIndex); }, false);
}});

// This is an observer on the "thumbnails" region. Any time the region is re-generated,
// we need to re-add the thumbnail zooming and click to show image behaviors.

Spry.Data.Region.addObserver("thumbnails", { onPostUpdate: function()
{
	// Get all of the divs that are directly underneath the
	// div with the id "thumbnails".

	var results = Spry.$$("#thumbnails > div");

	// Add the onclick handler that will set the main image
	// when the user clicks on the thumbnail.

	results.addEventListener("click", function()
	{
		// The id attribute of the div contains the id of the row in the dsPhotos data set
		// that was used to generate it. Extract out the rowID and pass it to HandleThumbnailClick().

		HandleThumbnailClick(this.id.replace(/^tnd/, ""));
	}, false);

	// Add the onmouseover handler that will cause the thumbnails
	// to grow.

	results.addEventListener("mouseover", function()
	{
		// The id attribute of the div contains the id of the row in the dsPhotos data set
		// that was used to generate it. Extract out the rowID and use it to get the row from
		// the dsPhotos data set.
		
		var row = dsPhotos.getRowByID(this.id.replace(/^tnd/, ""));

		// Now call GrowThumbnail() and pass it the values in the @thumbwidth and @thumbheight columns.

		GrowThumbnail(this.getElementsByTagName('img')[0], row["@thumbwidth"], row["@thumbheight"]);
	}, false);

	// Add the onmouseout handler that will cause the thumbnails
	// to shrink.

	results.addEventListener("mouseout", function(){ ShrinkThumbnail(this.getElementsByTagName('img')[0]); }, false);
}});

</script>
<script src="gallery.js"  type="text/javascript"></script>
</head>
<body id="gallery">
<noscript>
<h1>This page requires JavaScript. Please enable JavaScript in your browser and reload this page.</h1>
</noscript>
<div id="wrap">
  <h1 id="albumName" spry:region="dsGallery">{sitename}</h1>
  <div id="previews">
    <div id="galleries" spry:region="dsGalleries">
      <label for="gallerySelect">View:</label>
      <select spry:repeatchildren="dsGalleries" spry:choose="choose" id="gallerySelect">
        <option spry:when="function::IsCurrentGalleryRow" selected="selected">{sitename}</option>
        <option spry:default="default">{sitename}</option>
      </select>
    </div>
    <div id="controls">
      <ul id="transport">
        <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage(true);" title="Previous">Previous</a></li>
        <li class="pausebtn"><a href="#" onclick="if (gSlideShowOn) StopSlideShow(); else StartSlideShow();" title="Play/Pause" id="playLabel">Play</a></li>
        <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage();" title="Next">Next</a></li>
      </ul>
    </div>
    <div id="thumbnails" spry:region="dsPhotos dsGalleries dsGallery">
      <div spry:repeat="dsPhotos" id="tnd{ds_RowID}"> <img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}" src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}" width="24" height="24" style="left: 0px; right: 0px;" /> </div>
      <p class="ClearAll"></p>
    </div>
  </div>
  <div id="picture">
    <div id="mainImageOutline" style="width: 0px; height: 0px;"><img id="mainImage" alt="main image" src=""/></div>
  </div>
  <p class="clear"></p>
</div>
</body>
</html>
